﻿<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="UserLogin.ascx.cs" Inherits="IMDB.UserControls.UserLogin" %>
    <script type="text/javascript">
        function forgotUsername() {
            $('.forgot').qtip('hide');

            var username = $('#username');
            username.effect('bounce');

            setTimeout(function () { $('#username').select().focus() }, 1500);
        }

        $().ready(function () {
            var username = $('#username');
            username.val().length === 0 ? username.focus() : $('#password').focus();
        });
    </script>
<div id="login_imdb">
    <h3>
        log in to your IMDB account <a href="/signup" target="_parent">don&#39;t have a IMDB
            account?</a></h3>
    <form action="/login" method="post" target="_parent">
    <fieldset>
        <dl>
            <dt>
                <label for="username">
                    username or email</label></dt>
            <dd>
                <input class="text" id="username" name="username" type="text" value="" />
                <p class="note">
                    <a class="forgot" href="" onclick="forgotUsername(); return false;" tabindex="-1"
                        title="If you remember your password, try logging in with your email address">forgot
                        username?</a></p>
            </dd>
            <dt>
                <label for="password">
                    password</label></dt>
            <dd>
                <input class="text" id="password" name="password" type="password" />
                <p class="note">
                    <a class="forgot" href="/forgotpassword" tabindex="-1" target="_parent" title="If you remember your username or the email address you used when signing up, we can help you reset your password">
                        forgot password?</a></p>
            </dd>
            <dt></dt>
            <dd>
                <input class="button" type="submit" value="log in" /></dd>
        </dl>
    </fieldset>
    </form>
</div>
<style type="text/css">
    .provider
    {
        display:none;
    }
    
    .providers
    {
        padding-bottom:5px;
    }
    
    #third-party ul li
    {
        float:left;
        list-style:none;
        padding:0 0 0 10px;
    }

    #third-party ul li a
    {
        display:block;
        height:54px;
        width:85px;
    }

    #third-party ul li a img
    {
        border:2px solid #CCC;
    }

    #third-party ul li a:hover img
    {
        border:2px solid #999;
    }

    #third-party ul li.selected a img	
    {
        border:2px solid #61861E;
    }
</style>
<script type="text/javascript">
    function login(openID) {
        $('#openid').val(openID);
        $('.provider.openid form').submit();
    }

    function showProvider(provider) {
        $('.providers').hide();
        $('.provider.' + provider).show();
        $('.provider.' + provider + ' input.text').focus();
    }

    function showProviders() {
        $('.provider').hide();
        $('.providers').show();
    }
</script>
<div class="section" id="third-party">
    <div class="providers">
        <h3>or log in using your account with</h3>
        <ul>
            <li><a href="javascript:login('https://www.google.com/accounts/o8/id');"><img src="/Images/Connections/google.png" alt="Google" /></a></li> 
            <li><a href="javascript:login('http://yahoo.com');"><img src="/Images/Connections/yahoo.png" alt="Yahoo" /></a></li> 
            <li><a href="https://www.facebook.com/login.php?api_key=96a4f6e52f4e4a332462297b89d043d7&amp;extern=1&amp;fbconnect=1&amp;return_session=1&amp;v=1.0&amp;next=https://account.woot.com/facebook/authenticate&amp;fb_connect=1&amp;cancel_url=https://account.woot.com/login" target="_parent"><img src="/Images/Connections/facebook.png" alt="Facebook" /></a></li>

            <li><a href="/twitter/authenticate" target="_parent"><img src="/Images/Connections/twitter.png" alt="Twitter" /></a></li>
            <li><a href="javascript:showProvider('aol');"><img src="/Images/Connections/aol.png" alt="AOL" /></a></li>
            <li><a href="javascript:showProvider('openid');"><img src="/Images/Connections/openid.png" alt="OpenID" /></a></li>
        </ul>
    </div>
    <div class="provider aol">
        <h3>Enter your information and we’ll send you to AOL to finish up</h3>
        <form action="/openid/authenticate" method="post" onsubmit="$('.provider.aol input[name=&quot;openid&quot;]').val('http://openid.aol.com/' + $('#aol').val());" target="_parent">

            <fieldset> 
                <dl> 
                    <dt><label for="aol">AOL screen name</label></dt> 
                    <dd><input id="aol" class="text aol" name="aol" type="text" /></dd> 
                    <dt></dt> 
                    <dd>
                        <input class="button" type="submit" value="log in" />
                        <input class="button" onclick="javascript:showProviders();" type="reset" value="cancel" />
                    </dd> 
                </dl>
                <input name="openid" type="hidden" />

            </fieldset>
        </form>
    </div>
    <div class="provider openid">
        <h3>Enter your OpenID URL</h3>
        <form action="/openid/authenticate" method="post" target="_parent">
            <fieldset> 
                <dl> 
                    <dt><label for="openid">OpenID</label></dt> 
                    <dd><input class="text openid" id="openid" name="openid" type="text" /></dd> 
                    <dt></dt> 
                    <dd>

                        <input class="button" type="submit" value="log in" />
                        <input class="button" onclick="javascript:showProviders();" type="reset" value="cancel" />
                    </dd>
                </dl> 
            </fieldset>
        </form>
    </div>
</div>